<template>
  <div
    :class="[
      'el-row',
      { 'el-row--flex': props.type === 'flex' },
      props.justify !== 'start' && `is-justify-${props.justify}`,
      props.align !== 'top' && `is-align-${props.align}`,
    ]"
    :style="style"
  >
    <slot></slot>
  </div>
</template>

<script>
// vue-cli脚手架 不支持 import vueSetupExtend from 'unplugin-vue-setup-extend-plus/vite' 插件
export default {
  name: "ElRow",
};
</script>

<script setup>
import { ref, defineProps, computed } from "vue";

const props = defineProps({
  gutter: {
    type: Number,
    default: 0,
  },
  // flex布局的一些属性
  type: String,
  justify: {
    //水平对齐
    type: String,
    default: "start",
    //校验可选值, 你传入的这些props必须是下列可选的,存在则true,否则校验fales
    //val是传入的props
    validator: (val) => ["start", "end", "center", "space-around", "space-between"].includes(val),
  },
  align: {
    //垂直对齐
    type: String,
    default: "top",
    //校验可选值, 你传入的这些props必须是下列可选的,存在则true,否则校验fales
    //val是传入的props
    validator: (val) => ["top", "middle", "bottom"].includes(val),
  },
});

//去掉多余左右间距
const style = computed(() => {
  const style = {};
  if (props.gutter) {
    style.paddingLfet = -props.gutter / 2 + "px";
    style.paddingRight = props.gutter / 2 + "px";
  }
  return style;
});
</script>

<style lang="scss" scoped>
//使用float,导致块级塌陷 ,需清除父级的浮动
.el-row {
  &::after,
  &::before {
    display: block;
    content: "";
  }
  &::after {
    clear: both;
  }
  &--flex {
    display: flex;
    &::after,
    &::before {
      display: none;
    }
    &.is-justify-end {
      justify-content: end;
    }
    &.is-justify-center {
      justify-content: center;
    }
    &.is-justify-space-between {
      justify-content: space-between;
    }

    &.is-justify-space-around {
      justify-content: space-around;
    }

    &.is-align-middle {
      align-items: center;
    }
    &.is-align-bottom {
      justify-content: flex-end;
    }
  }
}
</style>
